<template>
  <div class="particulars" v-if="cardSong">
    <header class="head">
      <section
        :style="{
          backgroundImage: `url('${cardSong ? cardSong.coverImgUrl : ''}')`,
        }"
      ></section>
      <div class="all">
        <div class="imgleft">
          <img :src="cardSong.coverImgUrl" />
          <span></span>
        </div>
        <div class="contentright">
          <h2>{{ cardSong.name }}</h2>
          <div class="creator">
            <img :src="cardSong.creator ? cardSong.creator.avatarUrl : ''" /><span>{{
             cardSong.creator?cardSong.creator.nickname:''
            }}</span>
          </div>
        </div>
      </div>
    </header>
    <CommentNav>歌曲列表</CommentNav>
    <ul class="song-card-list">
      
      <NewSongs
        v-for="(item, index) in cardSong.tracks"
        :key="index"
        :item="item"
        :index="index"
        @click.native.stop="$emit('cardSong', item)"
        :cardsongs="cardsongs"
        :playsong="playsong"
        :played="played"
        @click.native="$emit('Card-Song', cardSong.tracks)"
      ></NewSongs>
    </ul>
    <CommentNav>精彩评论</CommentNav>
    <ul class="coment">
      <li v-for="item in comment" :key="item.id">
        <img :src="item.user? item.user.avatarUrl:''"/>
        <div>
          <div>
            <p class="nick">{{item.user? item.user.nickname:'' }}</p>
            <span>{{ getYear(item.time) }}</span>
          </div>
        </div>
        <p>{{ item.content }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import NewSongs from "@/components/NewSongs.vue";
import CommentNav from "@/components/CommentNav.vue";
export default {
  props: {
    cardsongs: Object,
    playsong: Object,
    played: Boolean,
  },
  components: {
    NewSongs,
    CommentNav,
  },
  data: function () {
    return {
      cardSong: null,
      hotComment: null,
      comment: null,
    };
  },
  created: function () {
    this.getCardSong(this.$route.query.id);
    this.getComment(this.$route.query.id);
  },
  methods: {
    getComment: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/comment/playlist?id=" + id)
        .then((res) => {
          console.log(res.data);
          this.hotComment = res.data.hotComments;
          this.comment = res.data.comments;
        });
    },
    getCardSong: function (id) {
      this.axios
        .get("https://apis.netstart.cn/music/playlist/detail", {
          params: { id },
        })
        .then((res) => {
          console.log(res.data.playlist);
          this.cardSong = res.data.playlist;
        });
    },
    getYear: function (time) {
      let getDate = new Date(time);
      let newDatas =
        getDate.getFullYear() +
        "年" +
        (getDate.getMonth() + 1) +
        "月" +
        getDate.getDate() +
        "日";
      return newDatas;
    },
  },
};
</script>

<style lang="less" scoped>
.particulars {
  position: relative;
  .head {
    height: 186px;
    overflow: hidden;

    section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 186px;
      z-index: -1;

      background-color: rgb(59, 59, 59);
      background-position: center center;
      background-size: cover;
      filter: blur(18px) brightness(0.6);
    }

    .all {
      display: flex;

      .imgleft {
        margin: 20px 15px;

        img {
          width: 180px;
        }
      }
      .contentright {
        margin: 20px 15px;
        h2 {
          font-size: 18px;
          color: white;
        }
        .creator {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            border-radius: 50%;
          }
          span {
            margin-left: 5px;
          }
        }
      }
    }
  }

  .song-card-list{
    margin: 0;
    padding: 0;
  }

  .coment {
      margin: 0;
      padding: 0;
      margin-left: 8px;
    li {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      div {
        margin-left: 5px;
        div {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          font-size: 10px;
          
          .nick{
            margin: 0;
            color: #666;
          }
          span{
            color: #999;
          }
        }
      }
      p{
        width: 100%;
       margin-left: 38px;
       font-size: 14px;
        
      }
    }
  }
}
</style>